/**
 * Created by guiyongdong on 16/10/7.
 */
import React, {Component} from 'react';
import  {
    StyleSheet,
    View,
    Image,
    Text,
    TouchableOpacity,
    PixelRatio,
    Dimensions,
    Platform,
    ListView
} from 'react-native';

var time = 0;
var dataArray = [];

export default class HomeMessageView extends Component {
    // 构造
    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 != r2});
        // 初始状态
        var messageArray = props.messageArray;
        var array = [];
        for(var i = 0; i<messageArray.length;i++){
            var temp = [];
            temp.push(messageArray[i]);
            temp.push(messageArray[i+1]);
            i++;
            array.push(temp);
        }
        dataArray = array;
        this.state = {
            dataSoure:ds.cloneWithRows(array)
        };
    }
    render() {
        var height = dataArray.length*50;
        return(
            <View style={[this.props.style,styles.container]}>
                <Image style={styles.image} resizeMode='stretch' source={require('../../resoure/main/home_message.png')}/>
                <View style={styles.lineView}/>
                <ListView
                    initialListSize={3}
                    contentContainerStyle={[styles.listView,{height:height}]}
                    dataSource={this.state.dataSoure}
                    renderRow={this._renderRow.bind(this)}
                    ref={'listView'}
                    showsVerticalScrollIndicator={false}
                    scrollEnabled={false}/>
            </View>  
        );
    }
    _renderRow(message,rowId){
        var topMessage = message[0];
        var bottomMessage = message[1];
        var paddingZore = {};
        if (Platform.OS == 'android') {
            paddingZore = {paddingTop:-1/PixelRatio.get()};
        }
        return(
            <View style={styles.row}>
                <TouchableOpacity activeOpacity={0.8} onPress={this._messageClick.bind(this,topMessage)}>
                    <View style={styles.item}>
                        <Text style={[styles.normalTagItem,paddingZore]}>{'热点'}</Text>
                        <Text style={styles.message} numberOfLines={1}>{topMessage['title']}</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.8} onPress={this._messageClick.bind(this,bottomMessage)}>
                    <View style={styles.item}>
                        <Text style={[styles.normalTagItem,paddingZore]}>{'热点'}</Text>
                        <Text style={styles.message} numberOfLines={1}>{bottomMessage['title']}</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
    _messageClick(messageData){
        this.props.messageClick(messageData['news_url']);
    }

    componentDidMount() {
        this.timer = setInterval(
            () => {
                time++;
                if(time == dataArray.length){
                    this.refs['listView'].scrollTo({x:0,y:0,animated:false});
                    time=0;
                }else {
                    this.refs['listView'].scrollTo({x:0,y:50*time,animated:true});
                }
            },
            4000
        );
    }
    componentWillUnmount() {
        // 如果存在this.timer，则使用clearTimeout清空。
        // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
        this.timer && clearInterval(this.timer);
    }

}
const styles = StyleSheet.create({
    container:{
        flexDirection:'row'
    },
    image:{
        width:45,
        height:40,
        marginLeft:27,
        marginTop:5
    },
    lineView:{
        marginTop:5,
        height:40,
        width:1/PixelRatio.get(),
        marginLeft:27,
        backgroundColor:'#DCDCDC'
    },
    listView:{
        height:50,
        width: Dimensions.get('window').width - 105-20,
        marginLeft:20,
        backgroundColor:'white'
    },
    row:{
        height:50,
        backgroundColor:'white',
        width:Dimensions.get('window').width - 105-20
    },
    item:{
        height:25,
        backgroundColor:'white',
        flexDirection:'row',
        alignItems:'center',
        width:Dimensions.get('window').width - 105-20
    },
    normalTagItem:{
        fontSize:11,
        color:'#FF2828',
        textAlign:'center',
        borderColor:'#FF2828',
        borderWidth:1/PixelRatio.get(),
        borderRadius:3,
        marginLeft:4,
        marginTop:1,
        height:15,
        padding:2
    },
    message:{
        marginLeft:5,
        fontSize:14,
        marginRight:5,
        width:Dimensions.get('window').width - 105-20-35,
        color:'#282828'
    }
});